Elm development on Windows with Atom

#Elm #Atom #Windows #WSL

普段はMacでしか開発してないが、ちょっとやりたいことがあってWindowsでも書けるようにしたい

elmjutsuが最強すぎるので、普段もMacで使っているAtomを使う

TL; DR

出来るようになった。WindowsでもElmは開発できる

Term and shell

何はともあれWSL (Windows Subsystem for Linux) with fish => fish on Bash on Ubuntu on Windows from Powershell

上のリンクだとPowershellを使っているが、最近は結局cmd.exeベースのbash.exe経由で使っている

Shellについては各自好みでよしなにやれば良い

良いフォントがなくて悩んでいたのだが、以下が結構まともだった

RictyDiminished-for-Powerline/powerline-fontpatched at master · mzyy94/RictyDiminished-for-Powerline

256色に対応してないので色はたいそう見づらい。めんどいのでここは諦めた

cmd.exeやPowerShellを256色以上に対応させようと思ってググるとたいていちゃぶ台返してConEmu使ってるブログ記事ばかり当たる

ConEmu入れてもいいんだけど、基本的にはEditor内で完結するようにさえできればいいかと思ったので深入りしていない

色がまともじゃないと死ぬ人はConEmu入れよう

WSLは、取っ掛かりとしてはほぼほぼUbuntuと考えてよくて、Ubuntuで通用することなら体感7割位は通用する印象(そんなには精査してないので結構適当に書いてる)

少なくともasdfを入れて、nodejsやelmのインストールなどは問題なく出来る(後述)

Atom and packages

普段開発環境の管理はいわゆるdotfiles方式でやってる => https://github.com/ymtszw/hiden

Mac用にしか調整してないので、WSLでは多くのMakeエントリがそのままでは通用しないが、部分的には流用できた

例えばmake vimでCUIから使うVimを最低限いい感じに動くように設定できるのだが、これは動いた

Atom自体は普通にWindows用のインストーラを使った

Atomが認識できるgitの設定とか、細かいことはいろいろほかにも有るが、キリがないので全部は触れない

面倒だったのがパッケージ群のインストールで、WSLからだとWindows版Atom同梱のapmは正しく動かない

当然っちゃ当然

https://github.com/Microsoft/WSL/issues/2467

普段はapmコマンドをフル活用して別環境のパッケージバージョンを同期しているので、これができないとなるとたいそうめんどい

いろいろごちゃごちゃやったあと、Windows版Atom同梱のapmは今の所WSLからは使えないが、コマンドプロンプトからなら使えることがわかったので、コマンドプロンプトからapm install --packages-file atom_packages.txtと直打ちして無事一括インストールできた

WindowsとMacではpath形式が違うので、config.csonは流用はできないと最初から思ったため、試していない

keymap.csonもMacとじゃ前提条件が違いすぎるので使えない

style.lessは利用できるかも

でもdataプロパティに対する指定を行っているCSSエントリはやっぱりpath形式の影響を受けるので、こちらもだめかも

デフォルトだと改行コードはOS DefaultつまりCRLFになってしまうので、line-ending-selectorパッケージの設定でLFにしておく

Atomエディタ上からファイルを新規作成する際のデフォルトの改行コードを設定する（Windows環境） - Qiita

ちなみに、KeybindingがWindowsだとどうしたってどうしようもないという問題が有る(cmdキーがないので避けられない)

基本的にはMac版のcmdがWinだとctrlになる。が、Mac版のctrlを置き換えられるキーがWinにはないのでいかんともしがたい

仕方ないのでaltに当てはめたりするが、押しづらい

(追記)デフォルトのキーバインドをほとんど覆すことになるが、macのcmdをwinのaltに置き換えるほうがいいかもしれない。このへんガバっとやってくれるパッケージがあれば入れてみてもいいかも

macでalt(option)だったものはどうせあまり使わないキーであることが多いので諦める

Mac版Atomで対応しているCocoaキーバインド(Emacsキーバインドの模倣)を、修飾キーをaltに置き換えて部分的にミミックしたものを手動設定したが、はっきり云って焼け石に水では有る。とは云え矢印キーに頼るのも許せないし、無い訳にはいかない(Macとのコンテキストスイッチはどうしようもなく辛い。耐え忍ぶ)

以下Snippet。親指の形がおかしくなりそうだが、ホームポジションはなんとか死守できる

Packageのキーバインドを潰すことが結構ある。Command Palette(Shift+Ctrl+p)で生きろ

code:keymap.cson

'atom-text-editor':

'alt-k': 'editor:cut-to-end-of-line'

'alt-d': 'core:delete'

'alt-h': 'core:backspace'

'alt-n': 'core:move-down'

'shift-alt-n': 'core:select-down'

'alt-p': 'core:move-up'

'shift-alt-p': 'core:select-up'

'alt-a': 'editor:move-to-beginning-of-line'

'shift-alt-a': 'editor:select-to-beginning-of-line'

'alt-e': 'editor:move-to-end-of-line'

'shift-alt-e': 'editor:select-to-end-of-line'

'alt-b': 'core:move-left'

'shift-alt-b': 'core:select-left'

'alt-f': 'core:move-right'

'shift-alt-f': 'core:select-right'

'alt-v': 'core:page-down'

'shift-alt-v': 'core:select-page-down'

'alt-r': 'core:page-up'

'shift-alt-r': 'core:select-page-up'

'alt-j': 'editor:join-lines'

'alt-w': 'editor:delete-to-beginning-of-word'

'shift-alt-w': 'editor:delete-to-end-of-word'

'alt-u': 'editor:delete-to-beginning-of-line'

また、Atom自体最近は起動が重いEditorだが、それはともかくとしても、npm packageをインストールしてnode_modulesディレクトリに大量のファイルが降ってきたりしたタイミングで著しく挙動が重くなるという問題を抱えている

関連issueはいくつか有るが、どれがcanonicalなのか、解決されてるのか、細かに調べるのは面倒なので放置してる

Mac版でも、Fuzzy finder(cmd+p)を開いたりすると(ignoreされていても)node_modules/以下のファイルをindexしようとしたりする挙動は有るのだが、Windows版の場合FileSystemの問題なのか何なのか、このへんが猛烈に遅い

2017年にAtom on windows環境構築しようとしたときも同じ問題はあった気がする。つまり根本原因は取り除かれていないと見ている

依存packageの多いwebpackやbabelなんかを入れると、最悪Atomがhangする。

Atomを開いた状態でterminalからなにかインストールすることをせず、ファイルが大量に生成される瞬間にはAtomを閉じておくほうが良いのかも？とは云えこのへんちゃんと試してはいない

Elm in Atom

Crucialなパッケージはelm-format, elmjutsu, linter-elm-make

Syntax highlightには自前Forkの https://github.com/ymtszw/language-elm

同じく私がpublishしているbuild-elm-analyseは対応させてない(使用頻度が低いため)

Windows版Atomが動いている環境は当然Windowsで、WSLに包まれてはいないことに注意が必要

WSL経由でGUIアプリケーションをインストールするのはたしかまだできないはず

したがってAtomパッケージから可視な環境もまた生のWindowsなので、elm用のpackageを動かすにはElm Platformやelm-formatが一通りWindows環境にインストールされている必要がある

(本チャンのビルドなどをWSL内でやるつもりだとしても、それとは別にAtom用に準備が必要、ということ)

基本的にはこのissue commentが0.18現状の決定版と見て良さそう

Elm Platformの公式Windowsインストーラを使えばPATHも通してくれる

elm-format.exeはElm Platformの\bin\フォルダに同居させる

elm-format.exeに関して云うと、syntax problemがある場合このエラーが表示されることがある(@jinjor)

Syntax problemがなければちゃんとformattingしてくれる。ハッピー

Package由来のメッセージが文字化けしたりすることがあったが、一概にどうすれば解決できるかは難しい。なんかごちゃごちゃやってたら治ったりしてた(適当)

Atom自体を再起動したり、WSLのコマンドから起動するのでなくホストWindowsのショートカットから起動したりしてみた気がする

elmjutsu, linter-elm-makeはElm Platformインストール済みであれば問題なく動いた。これだけで概ねハッピー！

Build from WSL

WSLからはホストWindowsのディレクトリを触ることが出来るので、今回やろうとしているように、

ホストWindows上にインストールしたAtomで開発

細かなビルドやgit操作などはWSLから

というダブルインターフェイス方式が出来る

すでに書いた通り、WSL側は「概ね」Ubuntuなので、いつものようにやる

私の場合、プログラミング言語のコンパイラやランタイムは出来る限りasdfで管理している

【言語バージョン管理】asdf使おう(erlang/elixir, node, etc...) - Qiita

普通にインストールしてpluginも導入し、とりあえずnodejsの8.11.3を入れた

elmもasdf-elmで入れてもいいし、あるいはnpm経由で入れても良い。私はnpm経由、というかyarn経由で入れた

code:bash

# 先にgnupgを入れておくのと、asdf-nodejsのREADMEに従ってOpenPGP keyを導入しておく

$ asdf install nodejs 8.11.3

$ asdf gloabl nodejs 8.11.3

$ npm install -g yarn

$ asdf reshim nodejs # globalに導入したCLIが見つからないときはたいていreshimすればリンクされる

$ yarn global add elm

$ asdf reshim nodejs

$ elm

Elm Platform 0.18.0 - a way to run all Elm tools

Usage: elm <command> <args>

Available commands include:

make Compile an Elm file or project into JS or HTML

package Manage packages from <http://package.elm-lang.org>

reactor Develop with compile-on-refresh and time-travel debugging

repl A REPL for running individual expressions

You can learn more about a specific command by running things like:

elm make --help

elm package --help

elm <command> --help

In all these cases we are simply running 'elm-<command>' so if you create an

executable named 'elm-foobar' you will be able to run it as 'elm foobar' as

long as it appears on your PATH.

あとはプロジェクトの体裁を整えて、webpack導入するなり、create-elm-appベースで進めるなり、いつもどおり行ける

もちろん、WSLで走らせている開発サーバにホストWindowsからアクセスもできる。

例えばwebpack-serveを導入 => yarn webpack-serve => ホストWindowsのブラウザからhttp://localhost:8080にアクセス、で問題なく動く

しばらく前のWindowsビルドだと、まだこの辺がうまくいかないケースが有ったようだが2018/06現在解決している

終わり

は～進捗した。実際この環境でなにか作り始めるのは今後。

コードは以下に有る

https://github.com/ymtszw/zephyr

一応、以下のオンラインイベントの時間帯の活動だった

Elmもくもぐ - connpass